<template>
    <div id="tips" class="tips">
        <div id="head">
           标签选择
           <a class="tosure" onclick="history.go(-1)" href="javascript:0;">确定</a>
        </div>
        <section class="tipslist">
            <a type="info" v-for="(item,index) in tips" :key="index" @click="choose(item.id,item.cname)">
                 <el-tag :class="{beChoosed:$store.state.tip.indexOf(item.cname)==-1}" >{{item.cname}}</el-tag>
            </a>
        </section>
    </div>
</template>

<script>
import {getTips} from '../../../js/dataServe.js'
export default {
    data(){
        return {
            tips:[]
        }
    },
    mounted(){
        //获取标签
        let self = this;
        let responseData = getTips(0);
        responseData.then((res)=>{
                                    if(res.result==1){
                                        self.tips = res.data.list
                                        // console.log(self.tips)
                                    }
                                })
    },
    methods: {
        //标签选择
        choose(id,val){
            if(this.$store.state.tip.indexOf(val) == -1){
                this.$store.commit('changeTip',{val:val,id:id});
            }else{
                this.$store.commit('delTip',{val:val,id:id});
            }
        }
    }
}
</script>
<style>
	#tips .el-tag{height: 1.8rem; line-height: 1.8rem; background: #00AA76; color: #fff; border: 0px;}
</style>
<style scoped >
.tosure{
    position: absolute;
    right: 1rem;
    color: #fff;
    top: 0;
}
#tips {
    width: 100%;
    height: 2.5rem;
    box-sizing:border-box;
    font-size:1rem;
}
.tips{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    background: #ffffff;
}
#head{
    background: -moz-linear-gradient(top, #00AA76 0%, #1ACCAC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00AA76), color-stop(100%,#1ACCAC));
    background: -webkit-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: -o-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: -ms-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: linear-gradient(to right, #00AA76 0%,#1ACCAC 100%);
    font-size:1.2rem;
    color:#ffffff;
    text-align:center;
    height:3rem;
    line-height:3rem;
}
.tipslist{
    padding:1rem;
}
.tipslist .el-tag{
    margin:0.5rem;
}
.beChoosed{
    background:#9e9e9e !important;
}
</style>
